<template>
  <ul class="articleList">
    <li v-for="(val) in items">
      <div class="content">
        <a class="title" @click="clickTitle(val)">{{val.title}}</a>
        <div class="abstract">{{val.content}}</div>
        <!--<div class="meta">-->
          <!--<div class="watch">-->
            <!--<div class="watchIcon"></div>-->
            <!--<article class="watchArticle">0</article>-->
          <!--</div>-->
          <!--<div class="pen">-->
            <!--<div class="penIcon"></div>-->
            <!--<article class="watchArticle">0</article>-->
          <!--</div>-->
          <!--<div class="heart">-->
            <!--<div class=heartIcon></div>-->
            <!--<article class="watchArticle">0</article>-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </li>
  </ul>
</template>

<script>
  import API from '../../API';
  export default {
    props:['items'],
    name: "articleList",
    data:function () {
      return {
      }
    },
    /**
     * 从服务器获取文章内容
     * @param val {object} items 对象数组的元素
     */
    methods:{
      clickTitle:async function (val) {
        const id = val.id;
        const result = await API.get.getArticleContent({id});
        console.log(location.href);
        const href = location.href;
        window.open(`${href}article/${id}`);
      }
    },
  }
</script>

<style scoped lang="less">
  ul{
    padding: 0;
  }
  .articleList{
    position: relative;
    box-sizing:border-box;
    list-style:none;
  }
  .articleList li{
    padding: 15px 2px 20px 0;
    border-bottom: 1px solid #000000;
  }
  .content{
    box-sizing: border-box;
  }
  .title{
    position: relative;
    display: block;
    box-sizing: border-box;
    font-family:-apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    margin: -7px 0 4px 0;
  }
  .title:hover{
    cursor: pointer;
    text-decoration: underline;
  }
  @abstractH : 24px;
  .abstract{
    height: @abstractH;
    margin:0 0 8px;
    font-size: 13px;
    line-height: @abstractH;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .meta{
    font-size: 12px;
    font-weight: 400;
    line-height: 20px
  }
  .watch,.pen,.heart{
    display: inline-block;
    margin-right: 10px;
  }
  .watchIcon{
    background-image: url("../../static/img/articleList/watch.png");
  }
  .penIcon{
    background-image: url("../../static/img/articleList/pen.png");
  }
  .heartIcon{
    background-image: url("../../static/img/articleList/heart.png");
  }
  .watchArticle{
    display: inline-block;
    font-size: 16px;
  }
  .watchIcon,.penIcon,.heartIcon{
    display: inline-block;
    background-size: cover;
    width: 12px;
    height: 13px;
  }
</style>
